<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            收集表单数据：
                若：<input type="text"/> 则v-model收集的是value值，用户输入的就是value值；
                若：<input type="radio"/> 则v-model收集的是value值，且要给标签配置value属性和值；
                若：<input type="checkbox"/>
                    1.没有配置input的value属性，那么收集到的就是checked（勾选 true or 未勾选 false）；

                    2.配置input的value属性：
                        （1）v-model的初始值是非数组，那么收集的就是checked（勾选 true or 未勾选 false）；
                        （2）v-model的初始值是数组，那么收集的就是value组成的数组；
                备注：v-model的三个修饰符：
                    lazy：失去焦点收集数据；
                    number：输入字符串转为有效的数字；
                    trim：输入首尾空格过滤。
        -->
        <div id="root">
            <hr/>
            <form @submit.prevent="demo()" action="#">
                账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
                密码：<input type="password" v-model="userInfo.password"> <br/><br/>
                年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
                性别：
                    男<input type="radio" name="sex" v-model="userInfo.sex" value="man">
                    女<input type="radio" name="sex" v-model="userInfo.sex" value="women">
                    未知<input type="radio" name="sex" v-model="userInfo.sex" value="unkonw">
                    <br/><br/>
                爱好：
                    学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                    健身<input type="checkbox" v-model="userInfo.hobby" value="run">
                    游戏<input type="checkbox" v-model="userInfo.hobby" value="eat">
                    <br/><br/>
                所属校区：
                    <select v-model="userInfo.schoolArea">
                        <option value="">---请选择校区---</option>
                        <option value="gz">广州</option>
                        <option value="sz">深圳</option>
                        <option value="hz">杭州</option>
                    </select>
                    <br/><br/>
                其他信息：
                    <textarea v-model.lazy="userInfo.otherInfo"></textarea>
                    <br/><br/>
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
                <br/><br/>
                <button>注册</button>
            </form>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            new Vue({
                el:"#root",
                data:{
                    userInfo:{
                        account:'',
                        password:'',
                        age:'',
                        sex:'unkonw',
                        hobby:[],
                        schoolArea:'',
                        otherInfo:'',
                        agree:''
                    },
                },
                methods: {
                    demo(){
                        if(this.userInfo.agree != true){
                            alert('请同意用户协议');
                        }else{
                            // console.log(this.userInfo);
                            console.log(JSON.stringify(this.userInfo));
                        }
                        
                    }
                },
                
            })
        </script>
        
    </body>
</html>